﻿@model PrjAssessModels.BaseModels.Project
@{
    ViewBag.Title = "添加材料埋设费用";
}

<div data-ng-app="myapp" data-ng-controller="myCtrl">
    <br />
    <div class="container">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h5>材料埋设添加</h5>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3">
                        <input type="date" class="form-control" name="time" data-ng-model="time">
                    </div>
                    <div class="col-xs-7">
                        <input type="number" step="any" data-ng-model="value" class="form-control"  name="value">
                    </div>
                    <div class="col-xs-2">
                        <button type="submit" class="btn btn-primary btn-block" data-ng-click="addMaterial()" data-ng-disabled="value<=0">添加</button>
                    </div>
                </div>
                <hr />
                <h5>&nbsp;<span class="text-muted">材料埋设费共:&nbsp;&nbsp;</span><strong>{{maxSum}}￥</strong>&nbsp;&nbsp;
                    <span class="text-muted">已用:&nbsp;&nbsp;</span><strong class="text-danger">{{used}}￥</strong>&nbsp;&nbsp;
                    <span class="text-muted">可用:&nbsp;&nbsp;</span><strong class="text-success">{{left}}￥</strong>&nbsp;&nbsp;
                    <a href="#" data-ng-click="expandDetails()">点击查看详情</a>
                    <a href="#" class="pull-right" data-ng-click="deleteMaterial()" data-ng-show="showDetails">删除选择项</a>
                </h5>
                
                <div data-ng-show="showDetails">
                    <br />
                    <div class="list-group">
                        <a class="list-group-item row" href="#" data-ng-repeat="item in assessList" data-ng-click="clickItem(item)"
                            data-ng-class="{true: 'active', false: ''}[item.checked]">
                            <span class="col-lg-4 text-danger">{{item.Value}}￥</span>
                            <span class="col-lg-4">{{item.SubTitle}}</span>     
                            <span class="col-lg-4 text-muted"><span class="pull-right">{{item.Time}}</span></span>
                        </a>
                    </div>
                </div>
            </div>


        </div>
        <hr />
        <div class="panel panel-default">
            <div class="panel-heading">
                <h5>材料埋设费用曲线</h5>
            </div>
            <div id="chart">
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var myapp = angular.module('myapp', []);
    myapp.controller('myCtrl', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) {

        $scope.value = 0;
        $scope.time = '@DateTime.Now.ToString("yyyy-MM-dd")';
        $scope.prjId = '@ViewBag.PrjId';
        $scope.assessList = [];
        $scope.showDetails = false;
        $scope.firstRun = true;
        $scope.maxSum = '@Model.MaterialBurySum';
        $scope.used = 0, $scope.left = 0;


        var createChart = function () {
            var pts = [];

            angular.forEach($scope.assessList, function (item)
            {
                var pt = {
                    x: item.Time.toString(),
                    y: item.Value,
                    name: item.SubTitle
                };
                pts.push(pt);
            });
            if ($scope.firstRun === false) {
                $('#chart').ejChart('destroy');
            }
            $scope.firstRun = false;
            $('#chart').ejChart({
                primaryXAxis: {
                    title: {
                        text: "日期"
                    }
                },
                primaryYAxis: {
                    labelFormat: "{value}￥",
                    title: {
                        text: '材料埋设费'
                    }
                },
                commonSeriesOptions: {
                    type: 'line',
                    animation: true,
                    marker: {
                        shape: 'circle',
                        size: {
                            height: 10,
                            width: 10
                        },
                        visible: true,
                    },
                    style: { borderWidth: 2 },
                    tooltipFormat: "#point.x# <br/> #point.name# : #point.y#"
                },
                series: [{
                    points: pts,
                    name: '材料埋设费'

                }],
                showTooltip: true,
                load: "loadTheme",
                text: '材料埋设费',
                size: {
                    height: 350
                },
                legend: {
                    visible: false
                }
            });
        }

        $scope.expandDetails = function () {
            $scope.showDetails = !$scope.showDetails;
        }

        $scope.freshData = function () {
            $http({
                url: '@Url.Action("GetAssessItems","DoAssess")',
                method: 'get',
                params: { prjId: $scope.prjId, title: '材料埋设' }
            }).success(function (data) {
                console.log('成功获取材料埋设数据列表');
                $scope.assessList = data;
                //格式化Time
                var used = 0;
                angular.forEach($scope.assessList, function (item) {
                    item.Time = item.Time.substring(0, 10);
                    used += item.Value;
                });
                $scope.used = used;
                $scope.left = $scope.maxSum - used;
                createChart();
            });
         };
        $scope.freshData();//显示数据
        

        //当用户选择
        $scope.clickItem = function (item) {
            if ($scope.selectedItem) {
                $scope.selectedItem.checked = false;
            }
            $scope.selectedItem = item;
            $scope.selectedItem.checked = true;
        }


        $scope.deleteMaterial = function () {

            if ($scope.selectedItem) {
                $http({
                    url: '@Url.Action("deleteAssessItem","DoAssess")',
                    method: 'post',
                    data: { jsonStr: JSON.stringify($scope.selectedItem) }
                }).success(function (data) {
                    $scope.freshData();
                });
            }

        }

        $scope.addMaterial = function () {
            if ($scope.value <= 0) return;//如果是0,还提交什么呢
            $http({
                url: '@Url.Action("insertAssessItem","DoAssess")',
                method: 'post',
                data: { jsonStr: JSON.stringify({ PrjId: $scope.prjId, Title: '材料埋设', SubTitle: '材料埋设', Time: $scope.time, Value: $scope.value }) }
            }).success(function (data) {
                $scope.freshData();
            });
        }
    }]);
</script>
